<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>goods</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<script type="text/javascript">
    function order(productId) {
        $.get("http://127.0.0.1:8080/shopping/order?productId="+productId, function () {
            window.location.href = "http://127.0.0.1:8080/shopping/list";
        })
    }
</script>
<body>
    <div style="margin-left: 45%; margin-top: 10%">
        <table border="1">
            <caption>goods</caption>
            <tr>
                <th hidden>id</th>
                <th>name</th>
                <th>residue</th>
                <th>operation</th>
            </tr>
            <tr th:each="product:${goods}">
                <form>
                    <td th:text="${product.name}"></td>
                    <td th:text="${product.residue}"></td>
                    <td><input type="button" value="buy" th:onclick="order([[${product.id}]]);"></td>
                </form>

            </tr>
        </table>
    </div>
</body>
</html>